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Abstract 

Background: The Islamic Prayer is central to the Islam religion and is a requirement for all Muslims to learn and 
perform properly. Teaching the Islamic Prayer had traditionally been through the use of textbooks. 

Aims: This paper describes the design and implementation of the IIP (interactive Islamic Prayer) system to teach the 
Islamic prayer using Virtual Environments and interactive technologies. 

Method: The approach taken was to first define the various elements that make up the Islamic Prayer (positions, verbal 
statements and units). This is then captured in software that uses the Microsoft Windows Kinect system. 

Results: The Islamic Prayer sequences were successfully captured and implemented in the ilP system. 

Conclusions: The ilP system design and implementation using Microsoft Windows Kinect system was described. This 
was based on the definition of the different elements of the Islamic Prayer. 

Keywords: human-computer interaction, virtual environments, Islamic prayer, kinesthetical learning, x-box 360 kinect, 
learning preferences 

1. Introduction 

Virtual Environments and Interactive Technologies can be used to enhance the learning process (Rieber 1996). This 
paper describes the design and implementation of the interactive Islamic Prayer (ilP) system (Farsi 2015) that teaches 
the Islamic Prayer to school children in an interactive virtual environment. 

The Islamic Prayer is a fundamental requirement for all Muslims to learn and perform properly. Teaching the Islamic 
Prayer had traditionally been through the use of textbooks. The majority of the Muslim population do not live in 
Muslim countries where the prayer is fully established and taught. This alone is a justification to support a new 
interactive system particularly as an educational tool or supplement. In developing software based interactive learning 
system the approach taken is to first define the various elements that make up the Islamic Prayer (positions, verbal 
statements and units), research a suitable virtual environment, and realise the system by using suitable tools. 

One important aspect to take into consideration is that of the learning styles of the intended audience. Fleming et al 
(2001) defined four modalities of learning styles, Visual, Aural, Read/Write, and Kinesthetic. The model states that 
learners have a dominant learning style or preference which can provide greater depth of learning for them. These are 
broken down into the following styles: 

• Visual preference: in the form of graphical or pictorial representations 

• Aural preferences: in the form of listening to lectures or discussions 

• Read/Write preferences: in the form of reading and writing texts and words 

• Kinesthetic preferences: in the form of doing and use of action 

The ilP system seeks to cater for all these styles through incorporating each style in its design. Analysis from the 
perspective of the traditional method of teaching it can be postulated that the development of a system like ilP is more 
appealing to learners as the lesson itself is not teacher-cantered nor does it cater for one style of teaching. Rather, the 
appeal is greater as it is envisaged that this approach will provide a greater learning experience and some sense of 
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achievement for the learners. Experimental results showed that it was effective in addressing different styles of learning 
in school children. The viability of the ilP system when used by school children was evaluated through a series of 
experiments and is described by Farsi (2015) and Farsi and Munro (2016). 

The ilP system is a learning tool that has been designed specifically for the Microsoft Windows Kinect so that learners 
can immerse themselves into the prayer through physical interaction without the need of a controller. This means that 
the learners can model their learning through the ilP system and actually perform the prayer movements in sequence 
that the system recognises and then assesses the learner’s progress accordingly. 

2. The Islamic Prayer Process 

Within the design of the ilP Software, there are certain aspects of the actual prayer process that need to be addressed and 
defined. These include how the prayer is performed, the names for each prayer movement, what verbal statements are made 
during each position, the prayer times for each of the five main prayers and how many units each prayer consists of. 

Each of the five daily Islamic prayers consists of a sequence of position that are performed by the user, each one is 
made up of a different number of units. Figure 2-1 shows each specific movement that is performed in one unit of 
prayer Piet (2011). The focus for the ilP Software is to ensure that users are performing the prayer positions correctly 
and in the correct order. The design takes into consideration how users should complete one unit of prayer using the 
interactive Software. 


START_ ONE RAKA'AH (ONE ROUND) _FINISH 



01 03 03 04 05 m 07 OS 09 10 


Figure 2-1.The Islamic prayer postions and levels 

In addition, the verbal statements that are made during each prayer position are Arabic phrases that have been 
predefined within Islamic teachings. Table 2-1 shows the list of all the verbal statements that are made at different 
position of the prayer. For the purpose of the ilP design, each verbal statement has been assigned a statement code, 
which is used to identify when it should be made. 

Table 2-1. A transliteration of the Arabic statements used during the prayer postions 


Statement Code 

verbal Statement 

SI 

"Allahu Akbar.” 

S2 

“Surat ul Fatihah” + “any Surat “ 

S3 

"Subhana Rabbiyal Adhim." 

S4 

"Sami'Allahu liman hamidah" + "Rabbana wlaka alhamd." 

S5 

"Subhana Rabbiyal A'la." 

S6 

“Rabbighfir li.” 

S7 

"Assalamu alaikum wa rahmatullah" 

"At-Tahiyyatu lillahi was- Salawatu wat-Tayyibatu. 

T1 

As-Salamu ' alaika ayyuhannabiyyu wa rahmatullahi wa barakatuhu. 

Assalamu 'alaina wa’ala ibadil-Lahis -Salihin ash hadu al-La ilaha il-Lal lahu 


wa ash hadu anna Muhammadan abduhu wa rasuluhu." 

"Allahumma salli 'ala Muhammadin Wa 'ala ali Muhammadin 

Kama sallaita 'ala Ibrahima wa 'ala ali Ibrahima 

T2 

wa barik 'ala Muhammadin wa 'ala ali Muhammadin 

Kama barakta ' ala Ibrahima Wa ' ala ali Ibrahima 

Fil a'lamina Innaka hamidun Majid." 


From the list of statements that will be uttered within the prayer, Table 2-2 shows the actual correlation between the 
position and the verbal statements by illustrating the prayer position name, a visual representation of the position and 
which verbal statement is uttered at that particular time (using the statement code from Table 2-1). 
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Table 2-2. Statement codes assigned to their prayer psotion 


Level Prayer Position name 


Visual image of the prayer position Statement 

Code 


Qiyaam (stand upright facing the dircation of 

ALKa’bah) 



03 


04 


05 


Takbeer Al-ihraam (Entering the prayer) 


Place your right hand on top of your left hand 


Rukoo (bowing) 


Stand up from the bowing position 



SI 


S2, SI 


S3 


S4, SI 




10 


Tasleem (closing the prayer) 


S7 
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Each prayer consist of a number of units (Arabic: Rak’ah). Within each prayer, there are three types of Rak’ah that 
correspond to the prayer position that are shown in Figure 2-1. These types of Rrak’ah are represented using a code in 
Table 2-3. For instance, Rak’ah #1 indicates the user will perform the sequential movements from level 1-8. 

Table 2-3. The Rak’ah in relation to the prayer positions level 

Units (Arabic: Rak’ah) Types Code 


1 


Rak’ah#! (Fevel 1-8) 


D 


2 


Rak’ah #2 (Fevel 1-9) 


3 Rak’ah #3 (Fevel 1-10) 


In each of the five daily prayers, the time of day and the number of Rak’ah for each prayer differs. Table 2-4 shows the 
prayer names in Arabic and the time period when each prayer is to be performed. Furthermore, the code that has been 
defined in Table 2-3 is also used to describe the number of Rak’ah in each of these prayers. 

Table 2-4. Prayer names with their times and units 


Prayer Name Prayer times Units (Rak’ah) 


Fajr 

One hour before Sunrise - Sunrise 

Zuhr 

Noon - Evening Q ^ |""| [ 

Aser 

Evening - Sunset 

Magreb 

Sunset - Night Q ^ ^ 

Isha 

Night - (One hour before Sunrise) Q ^ |""| [ 


After defining and establishing how and when each prayer movement, verbal statement and units are performed, 
Figures 2-2 provide a specific breakdown of the Zuhr prayer. 

The Zuhr prayer begins with Rak’ah #1 (Table 2-3), which corresponds to the position levels 1-8 (Figure 2-1). In each 
position, certain verbal statements are made that correspond to the statement codes in Table 2-1. Upon completing 
position 8, the user then goes to Rak’ah #2 (Table 2-3) and performs position levels 1-9 (Figure 2-1) with the assigned 
verbal statements. Upon completion of position 9, the user makes the statements T1 and SI (Table 2-1), and then goes 
to Rak’ah #1 (Table 2-3) and performs it as before. Lastly, the user completes Rak’ah #3 (Table 2-3), where they 
complete all the positions from levels 1-10 (Figure 2-1). The final position (and statement code S7) is used to end the 
prayer. It should be noted that each Rak’ah refers to the prayer in an ordinal sequence, which means the Zuhr prayer is 
made up of 4 units. 
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Second 

Rak'ah 


Third 

Rak'ah 


Forth 

Rak'ah 


c 




r 


Zuhr Prayer (noon or Afternoon) 


d 


Level and Statements 




First 

1 

2 

L J 

1 1 

3 

L J 

.. 

4 

L J 

CO 

f II 

6 

L J < 

Rak'ah 



r I 

r l 

if 1 




SI 

S2, SI 

S3 

S4, SI 

SS, SI 



L J 

1, _J 

f J 


L J 1 


1 

2 

L J 


l l 

SI 

f J 


S2, SI 


S4, SI 


SS, SI 


S6, SI 


SS, SI 


1 

2 

1. J 


r l 

si 

f J 


S2, SI 


i - \ 

5 

f ' 

6 

1 1 

S4, SI 

r ' 

SS, SI 

L 


S6, SI 


2 

si 


Figure 2-2. Sequence of positions and units for the Zuhr Prayer 

3. Design and Implementation of the ilP Software 


9 

Tl, SI 


I 

IL 

8 

if 

11 

SS, SI 


( 'I 

6 

f 'l 

7 

L J 

00 

9 

10 

SS, SI 

I 1 

S6, SI 

I J 

1 1 

SS, SI 

I J 

Tl, T2 

S7 


Upon opting for the Microsoft Windows Kinect as the desired console, it was identified that specific phases would be 
incorporated in order to construct the ilP Software. Figure 3-1 illustrates the phases of the implementation. Moreover, it 
should be noted that during each phase, a number of development tools were used, such as graphic editing Software to 
design the Start Screens and GUI; 3D modeling Software to create the instructional coach avatar; programming editing 
Software to develop the code that was necessary for the Microsoft Kinect. What follows is a detailed insight into each 
phase and the tools that were used. 
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3.1 Screen Design 

The initial phase was to design the various interface screens, graphics and logos that would be used in the ilP Software. 
Adobe Photoshop CS 8.0 was primarily used in this regard, which is a common image-editing program used by graphic 
designers to edit and enhance digital pictures and graphics (Figure 3-2). When designing the background screens, a 
particular colour scheme (i.e. light colours) was used throughout so it would not strain the users’ vision and make it 
easy to follow what else was on the screen. 
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Figure 3-2: Adobe Photoshop CS 8.0 

3.2 Animation 


Autodesk 3DS Max Design 2013 was used to generate 3D models of the instructional coach avatars (Figure 3-3). As 3D 
computer graphic Software, 3DS Max is frequently used in games as well as special effects in TV and movies. Four 
models were designed for different genders and ages. Each position of the prayer is developed by creating an array of 
still images of the position from beginning to end. 



Figure 3-3. Autodesk 3DS Max Design 2013 


In order to animate the 3D avatars, a basic video-editing program that can be used to insert the still images of the 3D 
generated models in the correct order was required. As a result, Microsoft Movie Maker was used, and once the still 
images of all the movements were added, it was split into each specific prayer position and movement (Figure 3-4). 



Figure 3-4. Microsoft Movie Maker design 
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3.3 Virtual Environment 


The next phase was to initiate the core component of the ilP Software, which was the actual coding for it to run 
effectively on the Xbox 360 Kinect. For this phase, two main development tools were utilized: Microsoft Visual Studio 
2010 (using Microsoft XNA tools) and the Microsoft Kinect for Windows Software Development Kit (SDK) version 
1.7. The SDK toolkit comprises of a vast reference library that is used to incorporate into Visual Studio for XBox 
Kinect application development (Figure 3-5). 


oo XnaBasics - Microsoft Visual Studio 


ll®. 


File Edit View Project Build Debug Team Data Tools Test Analyze Window 
jj3 T i ’ J ' ► [Debug * 3 swipe your 


I *2 $ & § ffl £ □ • 


I SkeletonStreamRenderer.es X 


SavedPos.es XnaBasicsGame.es 0bject2D.cs Positions. 


| ^Microsoft.Samples.Kinect.XnaBasics.SkeletonStreamRenderer 

l^mapMethod * 

9 E 

3 using System; 

I 

10 

using Microsoft.Kinect; 


11 

using System.Linq; 

|=) 

12 

using Microsoft.Xna.Framework; 


13 

using Microsoft.Xna.Framework.Graphics; 


14 

using Microsoft.Xna.Framework.Input; 


15 

using Microsoft.Xna.Framework.Audio; 


16 

using Microsoft.Xna.Framework.Media; 


17 

using Microsoft.Xna.Framework.Content; 


18 

using Microsoft.Xna.Framework.GamerServices; 


19 

using System.Threading; 


20 

using System.IO; 


21 

using System.Collections; 


22 

using System.Collections.Generic; 


24 E 

] III <summary> 


25 

III A delegate method explaining how to map a SkeletonPoint from i 

one space to another. 

26 

III </summary> 


27 

III <param name="point">The SkeletonPoint to map.</param> 


28 

III <returns>The Vector2 representing the target location. </returi 

ns> 

29 

public delegate Vector2 SkeletonPointMap(SkeletonPoint point); 


100 % - 


► 


Find Symbol Results 


| Q 0 Errors 21 Warnings i 0 Messages 

Description File Line 

‘System.Threading.Thre SkeletonStreamRende 661 
ad.ResumeO' is 
obsolete; 

"'Thread.Resume has 
been deprecated. 

Please use other classes 
n System.Threading, 


Project 

XnaBasics 


I Solution Explorer 

1 

^ SavedPos.cs 

SkeletonStreamRendei 
^ XnaBasicsGame.es 
XnaBasicsContent (Contei 

> Gj References 

> Gi BoyAnim 

> GI GirlAnim 

> Gi Keywords 

> Gl MenAnim 

> Gi WomenAnim 
SI °-P n 9 
Si 1-png 
Si 2.png 
Si 3.png 


¥ X 


XnaBasics Solution Properties 

:: it IB 


(Name) XnaBasics 

Active config Debug|x86 = 
Description 

Path D:\work\iIP 23- 

Startup projec XnaBasics 

I (Name) 

The name of the solution file. 


Figure 3-5. Microsoft Visual Studio (Coding Phase) 


For the ilP Software, three of the SDK elements (Skelton, Video Stream, Depth Video) were used, which were related to 
the skeleton tracking and hand pointer, depth and video stream camera. The output of the previous phases (Screen 
Design and Animation) were incorporated into Visual Studio 2010 as this was the main program used for final coding 
and implementation. During this phase, a structure and process for how the coding would be implemented was drawn 
up in a flow chart diagram (Figure 3-7). 


As part of the coding, the ilP Software uses a comparison algorithm when determining whether the user has performed 
each prayer movement correctly, by analysing the human motion across the X and Y axis of the depth camera. To 
achieve this, each prayer movement was captured using Visual Studio, whereby the actual human motion was recorded 
and titled accordingly (i.e. Level 1, Level 2 etc). Following this, an algorithm in C# that compares the X and Y 
coordinates of real-time and saved movements were tested, the flexibility is show by the + or - radius (value 120) within 
the coordinates to take into account slight variations of each user (Figure 3-6). 
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1125 

private int CheckSelectedPosition(SavedPos sv) 

1126 

{ 


1127 


int k = 0; 

1128 


int g = 0; 

1129 


for (JointType i = 0; i <= JointType . FootRight ; i++) 

1130 e 

] 

{ 

1131 


if ( (mapMethod(skel.Joints [i] .Position).X >= sv.pos[k].x - radius 

1132 


&& mapMethod(skel.Joints [i] .Position).X <= sv.pos[k].x + radius) 

1133 


&& (mapMethod(skel.Joints [i] .Position),Y >= sv.pos[k].y - radius 

1134 


&& mapMethod(skel.Joints [i] .Position).Y <= sv.pos[k].y + radius)) 

1135 e 

3 

{ 

1136 


g++; 

1137 


} 

1138 


k++; □ 

1139 


} 

1140 


return g; 

1141 

' } 



Figure 3-6. C# code for the skeleton position algorithm in comparison to saved position 

In addition, the coding also incorporated various checks and balances to establish whether the user was in the correct 
position before proceeding to the actual prayer (Figure 3-7). This is important within the context of the Islamic prayer 
because the prayer begins in the standing position. 



Figure 3-7. A process flow-chart for ilP Software 
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4. Conclusion 

This paper has defined the Islamic Prayer process and described the design and implementation of the ilP (interactive 
Islamic Prayer) system. Defining the Islamic Prayer process is an important step in designing a teaching system The ilP 
system provides a virtual environment for teaching the Islamic Prayer. An important aspect of the design of ilP is that it 
incorporates different learning styles. 
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